<template>
	<view class="container">
		<u-navbar :immersive="true" :is-back="false" :background="{ background: 'rgba(0,0,0,0)' }" :border-bottom="false" title="我的" title-color="#FFFFFF"></u-navbar>
		
		<image class="user-backdrop" src="../../../static/images/bg_user-backdrop.png" mode="widthFix"></image>
		<view class="user-header" @click="navigation('/pages/my/info/info', 1)" >
			<image class="user-header__avatar" :src="userinfo.avatar" mode="aspectFill"></image>
			<view class="user-header__content" v-if="userinfo.username">
				{{userinfo.username?userinfo.username:'请登录'}}
			</view>
			<view class="user-header__content" v-else>
				请登录
			</view>
			<u-icon name="arrow-right" color="#FFFFFF" size="30" margin-left="20"></u-icon>
		</view>
		<view class="user-menu">
			<view class="user-menu__title">我的约课</view>
			<view class="user-menu__grid">
				<view class="user-menu__item" @click="navigation('/pages/my/myClass/myClass?index=0', 1)">
					<image class="icon" src="../../../static/icons/icon_user-grid1.png" mode="aspectFit"></image>
					<text>已预约</text>
				</view>
				<view class="user-menu__item"  @click="navigation('/pages/my/myClass/myClass?index=1', 1)">
					<image class="icon" src="../../../static/icons/icon_user-grid2.png" mode="aspectFit"></image>
					<text>排队中</text>
				</view>
				<view class="user-menu__item"  @click="navigation('/pages/my/myClass/myClass?index=2', 1)">
					<image class="icon" src="../../../static/icons/icon_user-grid3.png" mode="aspectFit"></image>
					<text>已签到</text>
				</view>
				<view class="user-menu__item"  @click="navigation('/pages/my/myClass/myClass?index=3', 1)">
					<image class="icon" src="../../../static/icons/icon_user-grid4.png" mode="aspectFit"></image>
					<text>已取消</text>
				</view>
			</view>
			
			<view class="user-menu__grid" v-if="userinfo.teacher_status || userinfo.manage_status">
				<view class="user-menu__cell" v-if="userinfo.teacher_status" @click="navigation('/pages/teacher/myClass/myClass', 1)">
					<image class="icon" src="../../../static/icons/icon_user-grid1.png" mode="aspectFit"></image>
					<text>教师端</text>
				</view>
				<view class="user-menu__cell" v-if="userinfo.manage_status" @click="navigation('/pages/manage/timeTable/timeTable',1)">
					<image class="icon" src="../../../static/icons/icon_user-grid2.png" mode="aspectFit"></image>
					<text>管理端</text>
				</view>
			</view>
		</view>
		<view class="user-navs" >
			<u-cell-group :border="false">
				<u-cell-item title="充值会员" @click="navigation('/pages/my/vipBuy/vipBuy',1)">
					<text class="user-navs__sign">充</text>
				</u-cell-item>
				<u-cell-item title="我的会员卡" @click="navigation('/pages/my/vipCard/vipCard',1)"></u-cell-item>
				<u-cell-item title="我的报名" @click="navigation('/pages/my/myActivity/myActivity',1)"></u-cell-item>
				<u-cell-item title="我的团队" @click="navigation('/pages/my/myteam/myteam',1)"></u-cell-item>
				<u-cell-item title="推荐赚佣金" @click="navigation('/pages/my/myCash/myCash',1)"></u-cell-item>
				<!-- <u-cell-item title="退出登录"></u-cell-item> -->
			</u-cell-group>
		</view>
		<!-- 底部导航栏 start -->
		<u-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar"></u-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				userinfo:{}
			}
		},
		onLoad() {
			if(this.$core.getUserinfo()){
				this.fetchUserinfo()
			}
			uni.$on(app.globalData.event.userUpdate,this.userUpdate)
		},
		onUnload() {
			
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods: {
			
			//获取信息
			fetchUserinfo() {
				this.$core.get({url: 'fitness.user/index',data: {},success: ret => {
						this.userinfo = ret.data
					},
					loading: false
				});
			},
			userUpdate(){
				this.fetchUserinfo()
			},
			//跳转
			navigation(url, needlogin) {
				if (needlogin) {
					if (!this.$core.getUserinfo(true)) {
						return false;
					}
				}
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: auto;
	}
	.user-header {
		position: relative;
		display: flex;
		align-items: center;
		padding: 180rpx 30rpx 30rpx;
		&__avatar {
			display: block;
			margin-right: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		&__content {
			flex: 1;
			line-height: 48rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
	.user-menu {
		position: relative;
		padding: 0 24rpx;
		&__title {
			margin-bottom: 18rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		&__grid {
			display: flex;
			align-items: center;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0 9rpx 22rpx 0 rgba(227,227,227,0.5);
			overflow: hidden;
			&:first-child {
				margin-top: 0;
			}
		}
		&__item {
			flex: 1;
			padding: 20rpx 0;
			overflow: hidden;
			.icon {
				display: block;
				margin: 10rpx auto;
				width: 48rpx;
				height: 48rpx;
			}
			text {
				display: block;
				text-align: center;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
		&__cell {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			border-left: 1rpx #E8E8E8 solid;
			padding: 20rpx;
			overflow: hidden;
			&:first-child {
				border-left: 0;
			}
			.icon {
				display: block;
				margin-right: 30rpx;
				width: 56rpx;
				height: 56rpx;
			}
			text {
				display: block;
				line-height: 38rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	.user-navs {
		margin: 24rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-shadow: 0 9rpx 22rpx 0 rgba(227,227,227,0.5);
		overflow: hidden;
		/deep/ .u-cell {
			padding: 26rpx 0;
		}
		/deep/ .u-cell_title {
			font-size: 26rpx;
			color: #333333;
		}
		&__sign {
			float: right;
			display: block;
			width: 34rpx;
			height: 34rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			text-align: center;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #fff;
			border-radius: 50%;
		}
	}
</style>